<template>
  <div class="div">
    <div class="head">
      <div class="search">
        <img src="../IMG/搜索.svg" alt="">
        <input type="text" placeholder="搜索使用报告或商品">
    </div>
    </div>
    <div class="chin">
      <div class="chin1">
        <img src="../IMG/试吃开始.png" alt="" width="150px" height="200px">
      </div>
      <div class="chin2">
        <img src="../IMG/好物预告.png" alt="" width="170px" height="100px">
        <img src="../IMG/视用.png" alt="" width="170px" height="100px">
      </div>
      <h2>推荐试用</h2>
    </div>
    <div class="neck">
      <ul>
        <li v-for="a in opic" :key="a.value" class="div1"><img v-bind:src="a.scop" alt="">
        <a href="#" class="name">{{ a.finz }}</a><div class="div3"><p class="word">{{ a.mix }}</p><div class="look">{{ a.issue }}</div></div><a href="#" class="inter">{{ a.inter }}</a>
      </li>
      </ul>
    </div>
    
  </div>
</template>

<script>

export default {


data(){
  return{
    opic:[
      {
        scop:require('../IMG/小牛棒宠物零食.png'),
        finz:'小牛棒宠物零食 正装',
        mix:'共1份',
        issue:'公布中',
        inter:'已有30人申请'
      },
      {
        scop:require('../IMG/小牛片宠物零食.png'),
        finz:'小牛片宠物零食 正装',
        mix:'共1份',
        issue:'公布中',
        inter:'已有38人申请'
      },
      {
        scop:require('../IMG/慢烘鸭小胸肉干.png'),
        finz:'慢烘鸭小胸肉干 正装',
        mix:'共5份',
        issue:'公布中',
        inter:'已有20人申请'
      },
      {
        scop:require('../IMG/慢烘鸡胸片肉干.png'),
        finz:'慢烘鸡胸片肉干 正装',
        mix:'共5份',
        issue:'公布中',
        inter:'已有10人申请'
      },
      {
        scop:require('../IMG/么么鸡软骨零食.png'),
        finz:'么么鸡软骨零食 正装',
        mix:'共10份',
        issue:'公布中',
        inter:'已有30人申请'
      },
      {
        scop:require('../IMG/奶酪鸡胸肉干零食.png'),
        finz:'奶酪鸡胸肉零食 正装',
        mix:'共1份',
        issue:'公布中',
        inter:'已有20人申请'
      },
      {
        scop:require('../IMG/佰萃成  麦富迪.png'),
        finz:'佰萃成  麦富迪 正装',
        mix:'共10份',
        issue:'公布中',
        inter:'已有22人申请'
      },
      {
        scop:require('../IMG/么么鸡软固零食.png'),
        finz:'么么鸡软固零食 正装',
        mix:'共1份',
        issue:'公布中',
        inter:'已有20人申请'
      },

    ]
  }
}
}
</script>

<style lang="less" scoped>
 .div{
  width: 100%;
  height:100vh;
  position: relative;
}
.head{
  width: 100%;
  height: 12%;
  background-color: orange;
}
.search{
  border-radius: 15px;
  width: 80%;
  height: 30%;
  margin: 0 40px;
  background-color: white;
}
.search img{
  width: 10%;
  height: 100%;
}
.search input{
  border:0;
  text-align: center;
  margin-right: 70px;
  outline: none;
  height: 90%;
  float: right;
}
.chin{
  float: left;
  width: 95%;
  margin: -20px 10px;
  margin-bottom: 20px;
}
.chin1{
  float: left;
  width: 40%;
  height: 90%;
}
.chin2{
  width: 45%;
  
  margin-left: 50%;
}

.neck{
  width: 95%;
  // height: 132%;
  margin-left: 10px;
  position: absolute;
  top: 353px;
  // height: calc(100vh + 50%);
  height: 100vh;
}
.neck ul{
  width: 100%;
  // height: 86%;
  margin-left: -40px;
}
.neck .div1{
  width: 45%;
  float: left;
  list-style: none;
  margin-right: 9px;
  border-radius: 15px;
  border: 1px solid rgb(198, 196, 196);
  margin-top: 20px;
}
.neck img{
  width: 100%;
  // height: 150px;
}
.div1 .name{
  margin: 0 15px;
  color: black;
}
.div1 a{
  text-decoration: none;
  // color: black;
  // margin: 0 15px;
  font-size: 14px;
}
.div3{
  width: 100%;
  // height: 20px;
}
.word{
  color: orange;
  float: left;
  margin-top: 0;
}
.look{
  float: right;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: rgb(250, 179, 48);
  width: 50px;
  // height: 20px;
  color: white;
}
.inter{
  color: rgb(192, 188, 188);
}
</style>